<template>
	<div class="attachment">
		<el-button v-show="$store.state.power=='ROLE_AUDITOR'||$store.state.power=='ROLE_AUDITORMANAGER'" class="attachContrast" type="primary" icon="picture" @click="contrast">附件对比</el-button>
		<photoContrast @submit-attachContrast="contrast" ref="photoContrast"></photoContrast>
		<div v-show="isShow.carAndCredit" class="title">购车人和共同购车人附件</div>
		<el-row v-show="isShow.carAndCredit" class="info-row credit-imgs">
			<upload v-show="isEdit" @submit-uploadNone="isShow.carAndCredit=isShow.carAndCredit!='none'?true:false" class="upload" ref="carAndCredit"></upload>
		</el-row>
		<div v-show="isShow.assurePerson" class="title">担保人附件</div>
		<el-row v-show="isShow.assurePerson" class="info-row credit-imgs">
			<upload v-show="isEdit" @submit-uploadNone="isShow.assurePerson=isShow.assurePerson!='none'?true:false" class="upload" ref="assurePerson"></upload>
		</el-row>
		<div v-show="isShow.assetProtection" class="title">资产保全部附件</div>
		<el-row v-show="isShow.assetProtection" class="info-row credit-imgs">
			<upload v-show="isEdit" @submit-uploadNone="isShow.assetProtection=isShow.assetProtection!='none'?true:false" class="upload" ref="assetProtection"></upload>
		</el-row>
		<div v-show="isShow.finance" class="title">财务部附件</div>
		<el-row v-show="isShow.finance" class="info-row credit-imgs">
			<upload v-show="isEdit" @submit-uploadNone="isShow.finance=isShow.finance!='none'?true:false" class="upload" ref="finance"></upload>
		</el-row>
		<div v-show="isShow.car" class="title">车辆附件</div>
		<el-row v-show="isShow.car" class="info-row credit-imgs">
			<upload v-show="isEdit" @submit-uploadNone="isShow.car=isShow.car!='none'?true:false" class="upload" ref="car"></upload>
		</el-row>
		<div v-show="isShow.other" class="title">其它信息录入附件</div>
		<el-row v-show="isShow.other" class="info-row credit-imgs">
			<upload v-show="isEdit" @submit-uploadNone="isShow.other=isShow.other!='none'?true:false" class="upload" ref="other"></upload>
		</el-row>
		<div v-show="isShow.video" class="title">视频附件</div>
		<el-row v-show="isShow.video" class="info-row credit-imgs">
			<uploadVideo v-show="isEdit" @submit-uploadNone="isShow.video=isShow.video!='none'?true:false" class="upload" ref="video"></uploadVideo>
		</el-row>
	</div>
</template>
<script>
export default {
	name: 'attachment',
	components: {
		upload: require('../../components/other/upload'),
		uploadVideo: require('../../components/other/videoUpload'),
		photoContrast: require('../../components/libs/photoContrast')
	},
	data() {
		return {
			isEdit: false,
			id: '',
			photoAlbum1: {
				photoList: [],
				photoThumbList: []
			},
			photoAlbum2: {
				photoList: [],
				photoThumbList: []
			},
			attatchIndex: {
				'0': 'carAndCredit',
				'1': 'assurePerson',
				'2': 'assetProtection',
				'3': 'finance',
				'4': 'car',
				'5': 'other',
			},
			isShow: {
				carAndCredit: false,
				assurePerson: false,
				assetProtection: false,
				finance: false,
				car: false,
				other: false,
				video: false,
			},
		}
	},
	watch: {
		'isShow.carAndCredit': function(_cur, _old) {
			if (this.isEdit == false || _cur == true) {
				this.$emit('submit-attachmentHad');
			}
		},
		'isShow.assurePerson': function(_cur, _old) {
			if (this.isEdit == false || _cur == true) {
				this.$emit('submit-attachmentHad');
			}
		},
		'isShow.assetProtection': function(_cur, _old) {
			if (this.isEdit == false || _cur == true) {
				this.$emit('submit-attachmentHad');
			}
		},
		'isShow.finance': function(_cur, _old) {
			if (this.isEdit == false || _cur == true) {

				this.$emit('submit-attachmentHad');
			}
		},
		'isShow.car': function(_cur, _old) {
			if (this.isEdit == false || _cur == true) {
				this.$emit('submit-attachmentHad');
			}
		},
		'isShow.other': function(_cur, _old) {
			if (this.isEdit == false || _cur == true) {
				this.$emit('submit-attachmentHad');
			}
		},
		'isShow.video': function(_cur, _old) {
			if (this.isEdit == false || _cur == true) {
				this.$emit('submit-attachmentHad');
			}
		},
		deep: true
	},
	methods: {
		contrast() {
			let isNone = false;
			$.each(this.isShow, (i, val) => {
				if (val == true) {
					isNone = true;
				}
			});
			if (!isNone) {
				this.$message('附件为空');
				return;
			};
			this.photoAlbum1.photoList = [];
			this.photoAlbum1.photoThumbList = [];
			this.photoAlbum2.photoThumbList = [];
			this.photoAlbum2.photoList = [];
			$.each(this.$refs[this.attatchIndex[this.$refs.photoContrast.attachmentType]].fileList, (i, val) => {
				this.photoAlbum1.photoList.push(val.url);
				this.photoAlbum1.photoThumbList.push(val.url);
				this.photoAlbum2.photoThumbList.push(val.url);
				this.photoAlbum2.photoList.push(val.url);
			});
			// 附件对比
			this.$refs.photoContrast.start(this.photoAlbum1, this.photoAlbum2);
		},
		postDeal(_id, _annexBatchNo, _isAll) {
			console.log(this.$refs);
			// _isAll 1 只显示有数据的
			$.each(this.$refs, ((i, val) => {
				if (i != 'attachmentType') {
					val.isOne = false;
					val.type = 1;
					val.id = _annexBatchNo;
					val.isSecondDialog = true;
				};
				console.log(i);
				switch (i) {
					case 'carAndCredit':
						val.group = 0;
						break;
					case 'assurePerson':
						val.group = 3;
						break;
					case 'assetProtection':
						val.group = 4;
						break;
					case 'finance':
						val.group = 5;
						break;
					case 'car':
						val.group = 6;
						break;
					case 'other':
						val.group = 7;
						break;
					case 'video':
						val.group = 8;
						break;
					default:
						break;
				};
				if (i != 'photoContrast') {
					val.getFileList(this.isEdit, _isAll);
				};
			}));

		},
		attachmentEnter(_id, _isMust, _orderStatus) {
			let isAll = true;
			if (_isMust) {
				// this.$store.commit('isAllMustTrue');
				console.log('must' + 3);
			}
			this.id = _id;
			this.orderStatus = _orderStatus;
			this.$store.commit('saveNumAdd', this, _id);
		}
	},
	mounted() {}

}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.attachment {
	font-size: 14px;
	color: #475669;
	.credit-imgs {
		padding: 0px 20px;
		text-align: center;
		font-size: 14px;
		color: #99A9BF;
		.credit-img-each {
			width: 130px;
		}
		.credit-img {
			margin: 0 5px;
			cursor: pointer;
		}
		.upload {
			text-align: left;
			display: block !important;
		}
	}
	.attachContrast {
		margin: 10px 0px 20px 0px;
	}
}

</style>
